<template>
  <view class="withdraw-contanier">
    <Navbar :title="t('withdraw.title')"> </Navbar>

    <view class="content">
      <view class="headers">
        <view
          class="title"
          v-for="(item, index) in ['digital', 'bank']"
          :class="activeindex == index && 'active'"
          @click="headerTab(index)"
          >{{ t("withdraw." + item) }}</view
        >
      </view>
      <view v-if="activeindex == 0" class="form-content">
        <Usdtwithdraw></Usdtwithdraw>
      </view>
      <view v-if="activeindex == 1" class="form-content">
        <view class="item cion-type">
          <view
            ><text>{{ t("withdraw.trading") }}</text
            ><text class="type">{{ cion }}</text></view
          >
          <view
            class="arrow"
            :class="{ 'arrow-up': isShow }"
            @click="cionChange"
            ><img src="../../static/recharge/arrow.png" alt=""
          /></view>
          <view class="cionSeletion" v-if="isShow">
            <radio-group @change="onCionChange">
              <view
                class="selectItem"
                v-for="(cion1, index) in cionList"
                :key="cion1.id"
              >
                <view>{{ cion1.pay_token }}</view>
                <radio
                  activeBackgroundColor="#2B9BB2"
                  :value="cion1.pay_token"
                  :checked="cion == cion1.pay_token"
                />
              </view>
            </radio-group>
          </view>
        </view>
        <view class="item" v-for="(item, index) in keyMap" :key="item.id">
          <view
            >{{ t("withdraw." + item.title) }} :<text
              class="tips"
              v-if="item.field == 'obtain_amount'"
            >
              ({{ t("withdraw.deducting") }} <text>{{ gis + "%" }}</text>
              {{ t("withdraw.fee") }})
            </text></view
          >
          <view class="input-item">
            <textarea
              class="textarea"
              v-if="item.type == 'text-area'"
              :maxlength="200"
              v-model="form[item.field]"
              :placeholder="t('withdraw.' + item.placeholder)"
            ></textarea>
            <input
              v-else
              v-model="form[item.field]"
              class="input"
              @input="(e) => payAmountChange(e, item.field)"
              :placeholder="t('withdraw.' + item.placeholder)"
            />
          </view>
        </view>
        <view class="operation">
          <button
            class="btn"
            @click="confirm"
            :loading="loading"
            :disabled="loading"
          >
            {{ t("withdraw.cfm") }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Navbar from "../../components/Navbar.vue";
import Usdtwithdraw from "./usdt-withdraw.vue";
import api from "../../networks/apis";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const activeindex = ref(0);
const cion = ref("");
const cionList = ref([]); //币种兑换比率
const loading = ref(false); //按钮禁用
const cionObj = ref({
  reate_time: "",
  id: 0,
  notes: "",
  obtain_token: "",
  pay_token: "",
  rate: 1,
  type: 0,
}); //已选币种
const keyMap = [
  {
    title: "bank_name",
    field: "bank_name",
    placeholder: "pbn",
  },
  {
    title: "bank_address",
    field: "bank_address",
    placeholder: "pbd",
  },
  {
    title: "swift_code",
    field: "swift_code",
    placeholder: "psc",
  },
  {
    title: "payee",
    field: "payee",
    placeholder: "pp",
  },
  {
    title: "payee_account",
    field: "payee_account",
    placeholder: "ppa",
  },
  {
    title: "pay_amount",
    field: "pay_amount",
    placeholder: "ppam",
  },
  {
    title: "obtain_amount",
    field: "obtain_amount",
    placeholder: "poa",
  },
  {
    title: "notes",
    field: "notes",
    type: "text-area",
    placeholder: "pn",
  },
];

const form = ref({
  token: "", //韩元
  pay_amount: "", //提现金额
  bank_name: "", //银行名称
  bank_address: "", //银行开户行地址
  payee: "", //收款人名称
  payee_account: "", //收款人账户
  swift_code: "",
  notes: "",
});
const isShow = ref(false); //是否选择币种
onMounted(async () => {
  getRateData();
  getgis(0);
});
const gis = ref(0);
const fee = ref(0);
const getgis = async (num) => {
  const { data } = await api.getWithdrawalFee(num);
  gis.value = data.rate;
  fee.value = data.fee;
};
const getRateData = async () => {
  const res = await api.getRateApi();
  cionList.value = res.data;
  if (cionList.value.length > 0) {
    cionObj.value = cionList.value[0];
    cion.value = cionObj.value.pay_token;
  }
};

const headerTab = (index) => {
  if (activeindex.value == index) return;
  activeindex.value = index;
};

const cionChange = () => {
  isShow.value = !isShow.value;
};
const onCionChange = (e) => {
  cion.value = e.detail.value;
  cionObj.value = cionList.value.filter(
    (item) => item.pay_token == cion.value
  )[0];
  form.value.pay_amount = "";
  form.value.obtain_amount = "";
  isShow.value = false;
};
// 输入提现金额
const payAmountChange = (e, type) => {
  if (type == "pay_amount") {
    form.value.pay_amount = e.detail.value;
    form.value.obtain_amount = Number(
      (form.value.pay_amount ) * (1 - gis.value / 100)
    ).toFixed(3);
    return;
  }
  if (type == "obtain_amount") {
    form.value.obtain_amount = e.detail.value;
    form.value.pay_amount = Number(
      form.value.obtain_amount * (1 + gis.value / 100)
    ).toFixed(3);
    return;
  }
};

const confirm = async () => {
  if (!cion.value) {
    uni.showToast({
      title: "Please select the trading currency",
      icon: "none",
    });
    return;
  }
  if (!form.value.pay_amount) {
    uni.showToast({
      title: "Please enter the withdrawal amount",
      icon: "none",
    });
    return;
  }
  loading.value = true;
  const param = {
    ...form.value,
    token: cion.value,
  };
  const res = await api.withdrawalOrderApi(param);
  loading.value = false;
  if (res.code != 0) {
    uni.showToast({
      title: res.msg || res.data.msg || "withdrawal fail",
      icon: "error",
      duration: 2000,
    });
  } else {
    uni.showToast({
      title: "withdrawal successful",
      icon: "success",
      duration: 1000,
    });
    const t = setTimeout(() => {
      clearTimeout(t);
      uni.reLaunch({
        url: "/pages/my/index",
      });
    }, 1500);
  }
};
</script>
<style lang="scss" scoped>
.withdraw-contanier {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 85rpx;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
  color: #fff;
  .content {
    margin-top: 35rpx;
    padding: 0 25rpx;
    .headers {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 105rpx;
      background: #060a0d;
      border-radius: 53rpx 53rpx 53rpx 53rpx;
      .title {
        width: 50%;
        height: 100%;
        line-height: 105rpx;
        text-align: center;
      }
      .active {
        background: linear-gradient(133deg, #91e3d7 0%, #2b9bb2 100%);
        border-radius: 53rpx 53rpx 53rpx 53rpx;
        color: #060a0d;
      }
    }
    .form-content {
      margin-top: 35rpx;

      .item {
        margin: 25rpx 0;
        .tips {
          color: #4f575b;
          font-size: 26rpx;
        }
        .input-item {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          padding-left: 15rpx;
          background: #060a0d;
          border-radius: 12rpx;
          margin-top: 15rpx;
          .input {
            width: 100%;
            height: 89rpx;
          }
          .textarea {
            height: 234rpx;
            padding: 15rpx;
          }
        }
        .detail-pic {
          width: 282rpx;
          height: 242rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 35rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .cion-type {
        position: relative;
        height: 89rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #4f575b;
        .type {
          margin-left: 15rpx;
          color: #2b9bb2;
        }
        .arrow {
          width: 26rpx;
          height: 26rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .arrow-up {
          transform: rotate(90deg);
        }
        .cionSeletion {
          position: absolute;
          right: 0;
          top: 89rpx;
          width: 255rpx;
          background-color: #060a0d;
          border-radius: 12rpx;
          padding: 15rpx 28rpx;
          z-index: 1000;
          .selectItem {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15rpx 0;
          }
        }
      }

      .operation {
        margin-top: 45rpx;
        .btn {
          height: 99rpx;
          line-height: 99rpx;
          background: linear-gradient(133deg, #91e3d7 0%, #2b9bb2 100%);
          border-radius: 30rpx 30rpx 30rpx 30rpx;
          font-weight: 600;
        }
      }
      .operation1 {
        margin-top: 30vh;
      }
    }
  }
}
</style>
